<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter()

const remove = (i: number) => {
    let arr = JSON.parse(localStorage.getItem('bookshelf') as string) || []
    arr.splice(i, 1)
    localStorage.setItem('bookshelf', JSON.stringify(arr))
    window.location.reload()
}

const book: [{ title: string, author: string, coverImage: string, id: string }] = JSON.parse(localStorage.getItem('bookshelf') as string) || []


</script>
<template>
    <div class="header">
        <div class="back" @click="router.go(-1)">
            <van-icon name="arrow-left" />
        </div>
        <div class="title">我的书架</div>
        <div class="home" @click="router.push('/')">首页</div>
    </div>
    <div class="banner">
        <div class="total">共<span>{{ book.length }}</span>本</div>
    </div>
    <div class="item" v-for="(b, i) in book">
        <div class="poster" @click="router.push(`/book/${b.id}?title=${b.title}`)">
            <img :src="b.coverImage" alt="">
        </div>
        <div class="name">
            <h3 class="name-title">{{ b.title }}</h3>
            <p class="author">{{ b.author }}</p>
        </div>
        <div class="delete" @click="remove(i)">
            删除
        </div>
    </div>
</template>
<style scoped lang="scss">
.header {
    width: 375rem;
    height: 44rem;
    display: flex;
    background-color: #E64D2E;
    font-size: 18rem;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    .back {
        font-size: 20rem;
        margin-left: 15rem;
    }

    .home {
        font-size: 14rem;
        padding-right: 15rem;
    }
}

.banner {
    width: 355rem;
    height: 29rem;
    padding: 8rem 10rem;
    border-bottom: 1rem solid #dcdcdc;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .total {
        span {
            color: #E64D2E;
            font-weight: bold;
        }
    }

    .btn {
        width: 36rem;
        height: 12rem;
        padding: 7rem 13rem;
        text-align: center;
        border-radius: 3rem;
        background: linear-gradient(to bottom, #fefefe, #e3e3e3);
        border: 1rem solid #ccc;
        color: #333;
    }

    .btn-finish {
        width: 36rem;
        height: 12rem;
        padding: 7rem 13rem;
        text-align: center;
        border-radius: 3rem;
        background: linear-gradient(to bottom, #73b554, #5e9843);
        border: 1rem solid #50823b;
        color: #fff;
    }
}

.item {
    width: 360rem;
    height: 88rem;
    padding: 7rem 0;
    margin-left: 15rem;
    display: flex;
    position: relative;
    border-bottom: 1rem solid #e5e5e5;
    background-color: #f5f5f5;

    .poster {
        width: 64rem;
        height: 88rem;
        margin-right: 10rem;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .name {
        width: 286rem;

        .name-title {
            height: 18rem;
            padding-bottom: 2rem;
            font-size: 16rem;
            line-height: 18rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .author {
            color: #aaa;
            line-height: 16rem;
            height: 16rem;
            overflow: hidden;
            font-size: 12rem;
        }
    }

    .delete {
        width: 29rem;
        height: 15rem;
        padding: 5rem 7rem;
        border: 1rem solid #E64b3c;
        color: #E64b3c;
        text-align: center;
        line-height: 15rem;
        border-radius: 3rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20rem;
    }
}
</style>